<template>
	<view class="alarm-page">
		<view class="search-bar">
			<view class="search-type active">
				<image src="../../static/images/icons/person-active.png"></image>
			</view>
			<view class="search-type">
				<image src="../../static/images/icons/exigence-active.png"></image>
			</view>
			<view class="search-type">
				<image src="../../static/images/icons/eye-active.png"></image>
			</view>
			<view class="search-time" @click="showDatePopup" >
				<view class="date-text">{{date}}</view>
				<view class="date-icon">
					<image src="../../static/images/icons/date.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</view>
		
		<view class="alarm-total">Total number of alarms（<text style="color: #DA2407;">20</text>）</view>
		
		<scroll-view  class="alarm-list" scroll-y="true" :refresher-enabled="true" @scrolltolower="loadmore" lower-threshold="50">
			<view class="alarm-item" v-for="item in 30" >
				<view class="item-img">
					<image src="../../static/images/list-image-demo.png" style="width: 100%;height: 100%;" alt="" />
				</view>
				<view class="item-content">
					<view class="item-title">
						<view class="title-1">living room</view>
						<view class="title-2">15:30</view>
					</view>
					<view class="item-data">
						<view class="data-1">ID:6049305435</view>
						<view class="gap">|</view>
						<view class="data-2">Channel 1</view>
					</view>
					<view class="item-desc">
						Humanoid detection
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>

</template>

<script setup>
	import { ref } from 'vue';
	import {onShow} from "@dcloudio/uni-app"
	const datePopup = ref();
	const date = ref('');
	
	const setData = (date)=> {
		date.value = date;
	}
	
	
	const showDatePopup = ()=>{
		uni.navigateTo({
			 url: '/pages/alarm/datePicker?date='+date.value
		})
	}
	
	const loadmore = ()=>{
		console.log('loading')
	}
	
	onShow(()=>{
		let pages = getCurrentPages();
		if (pages[pages.length - 1].$vm.date) {
			date.value = pages[pages.length - 1].$vm.date.value;
		}
	})
	
</script>

<style lang="scss" scoped > 
.alarm-page{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	.search-bar{
		padding: 0 30rpx;
		display: flex;
		flex-wrap: nowrap;
		height: 70rpx;
		align-items: center;
		justify-content: flex-start;
		margin-top: 15rpx;
		.search-type{
			flex: 0 0 70rpx;
			height: 70rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #fff;
			margin-right: 12rpx;
			padding: 6rpx;
			image{
				width: 100%;
				height: 100%;
			}
			&.active{
				background-image: linear-gradient(90deg, #FF6623 17%, #F22E40 91%);
			}
		}
		.search-time{
			margin-left: 20rpx;
			flex: 1;
			height: 70rpx;
			background-color: #fff;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			.date-text{
				flex: 1;
				margin-left: 50rpx;
				color: #222;
			}
			.date-icon{
				flex: 0 0 58rpx;
				height: 58rpx;
			}
		}
	}

	.alarm-total{
		padding: 0 30rpx;
		margin-top: 40rpx;
		height: 34rpx;
		font-size: 24.5rpx;
		color: #222;
	}

	.alarm-list{
		flex: 1;
		background-color: #fff;
		padding: 0 30rpx;
		margin-top: 20rpx;
		overflow: auto;
		.alarm-item{
			width: 100%;
			height: 204rpx;
			border-bottom: 0.58rpx solid #E8E8E8;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;
			padding: 34rpx 0;
			
			.item-img{
				flex: 0 0 192rpx;
				height: 136rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}
			
			.item-content{
				flex: 1;
				margin-left: 18rpx;
				height: 136rpx;
				display: flex;
				flex-direction: column;
				.item-title{
					line-height: 40rpx;
					display: flex;
					color: #222;
					.title-1{
						flex: 1;
						font-size: 28rpx;
						font-weight: 600;
					}
					.title-2{
						flex: 1;
						text-align: right;
					}
				}
				.item-data{
					color: #37343B;
					font-size: 24.5rpx;
					display: flex;
					height: 60rpx;
					margin-top: 8rpx;
					.gap{
						padding: 0 30rpx;
						color: #e1e1e1;
					}
				}
				.item-desc{
					color: #898989;
					font-size: 24.5rpx;
				}
			}
		}
	}

}	
	
.popup-content{
	padding: 20rpx 30rpx;
	height: 600rpx;
	border-radius: 10rpx 10rpx 0 0;
}

</style>